<template>
  <form @submit.prevent="handleRegister">
    <div class="form-group">
      <label for="username">
        <i class="icon fas fa-user"></i>
        <span>用户名</span>
      </label>
      <input
        type="text"
        id="username"
        v-model="username"
        placeholder="请输入用户名"
        required
      >
    </div>
    <div class="form-group">
      <label for="password">
        <i class="icon fas fa-lock"></i>
        <span>密码</span>
      </label>
      <input
        type="password"
        id="password"
        v-model="password"
        placeholder="请输入密码"
        required
      >
    </div>
    <div class="form-group">
      <label for="confirmPassword">
        <i class="icon fas fa-lock"></i>
        <span>确认密码</span>
      </label>
      <input
        type="password"
        id="confirmPassword"
        v-model="confirmPassword"
        placeholder="请再次输入密码"
        required
      >
    </div>
   
    <div v-if="errorMessage" class="error-message">
      <i class="fas fa-exclamation-circle"></i> {{ errorMessage }}
    </div>
    <button
      type="submit"
      class="submit-btn"
      :disabled="loading"
    >
      <span v-if="!loading">注册</span>
      <span v-else>
        <i class="fas fa-spinner fa-spin"></i> 注册中...
      </span>
    </button>
  </form>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';

const username = ref('');
const password = ref('');
const confirmPassword = ref('');
const securityLevel = ref('1');
const loading = ref(false);
const errorMessage = ref('');

const handleRegister = async () => {
  errorMessage.value = '';
  loading.value = true;
  
  if (password.value !== confirmPassword.value) {
    errorMessage.value = '两次输入的密码不一致';
    ElMessage.error(errorMessage.value);
    loading.value = false;
    return;
  }
  
  try {
    const response = await axios.post('http://localhost:8083/user/register', {
      username: username.value,
      password: password.value
    }, {
      // 关键修改：告诉Axios接受400响应而不抛出错误
      validateStatus: (status) => status >= 200 && status < 500
    });

    // 处理业务响应（包括400错误）
    if (response.data.success) {
      await ElMessageBox.alert(response.data.data, '注册成功', {
        confirmButtonText: '确定',
        callback: () => {
          window.location.href = '/login';
        }
      });
    } else {
      // 显示服务端返回的具体错误信息
      errorMessage.value = response.data.errorMsg || '注册失败';
      ElMessage.error(errorMessage.value);
    }
    
  } catch (error) {
    console.error('注册请求失败:', error);
    
    // 这里只处理真正的网络错误
    if (error.request) {
      errorMessage.value = '服务器无响应，请检查网络连接';
    } else {
      errorMessage.value = `请求发送失败: ${error.message}`;
    }
    
    ElMessage.error(errorMessage.value);
  } finally {
    loading.value = false;
  }
};

</script>
<style scoped>

.form-group {

margin-bottom: 22px;

}

.form-group label {

display: flex;

align-items: center;

margin-bottom: 8px;

font-weight: 500;

color: #555;

}

.icon {

margin-right: 10px;

color: #4776E6;

width: 20px;

text-align: center;

}

input {

width: 100%;

padding: 14px 15px;

border: 1px solid #ddd;

border-radius: 8px;

font-size: 16px;

transition: all 0.3s;

}

input:focus {

border-color: #4776E6;

box-shadow: 0 0 0 3px rgba(71, 118, 230, 0.2);

outline: none;

}

.submit-btn {

width: 100%;

padding: 14px;

background: linear-gradient(135deg, #4776E6 0%, #8E54E9 100%);

color: white;

border: none;

border-radius: 8px;

font-size: 16px;

font-weight: 600;

cursor: pointer;

transition: all 0.3s;

}

.submit-btn:hover {

background: linear-gradient(135deg, #3a68d6 0%, #7c45d9 100%);

transform: translateY(-2px);

box-shadow: 0 5px 15px rgba(71, 118, 230, 0.4);

}

.error-message {

color: red;

margin-top: 10px;

}
.form-group {
  margin-bottom: 22px;
}

.form-group label {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-weight: 500;
  color: #555;
}

.icon {
  margin-right: 10px;
  color: #4776E6;
  width: 20px;
  text-align: center;
}

select {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s;
  background-color: white;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 1em;
}

select:focus {
  border-color: #4776E6;
  box-shadow: 0 0 0 3px rgba(71, 118, 230, 0.2);
  outline: none;
}
</style>